<template>
  <view class="emoji-main"  v-show="emojiDataInited && sEmojiActive">
    <swiper
            class="emoji-wrapper"
            :indicator-dots="true"
            :current="0"
            circular="true"
    >
    
      <swiper-item v-for="(item, key) in emojiData" :key="key" class="emoji-page"
                   :class="[key==emojiData.length-1?'lastbox':'']">
      
        <text v-for="(expressionItem, index) in item" :key="index" @click="selectEmoji(expressionItem)" class="emoji-icon">{{expressionItem}}</text>
    
      </swiper-item>
    </swiper>
    
  </view>
</template>

<script>
  import {uniShowToast} from "../../util/misc"
  import emoji from "../../util/newSDK/m-emoji/emoji"
  import {chatMixin} from "../../util/reuse/chatMixin"
  import {rongEvent} from "../../util/rongCloud/messaging"

  export default {
    mixins: [chatMixin],
    data(){
      return {
        emojiDataInited: false, // 表情数据加载完否
        showEmoji: false, // 表情框弹出表情框选择
        emojiData: [],

      }
    },
    methods:{
      selectEmoji(val) {
        this.$emit('emojiSelected', val)
      },
      initEmoji() {
        return new Promise(resolve => {
          let page = Math.ceil(emoji.length / 21);
          for (let i = 0; i < 5; i++) {
            this.emojiData[i] = [];
            for (let k = 0; k < 21; k++) {
              emoji[i * 21 + k] ? this.emojiData[i].push(
                  emoji[i * 21 + k]
              ) : ''
            }
          }
          resolve()
        })
      },
    },
    mounted: async function () {
      await this.initEmoji();
      this.emojiDataInited = true
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/styles/global";
  
  .emoji-main{
    .emoji-wrapper {
      @include borderBox;
      width: 375;
      height: 50vw; // 表情选择框高度
      background-color: white;
      padding: 5vw;
    
      .emoji-page {
        @include borderBox;
        margin: 0 auto;
        display: flex;
        padding-left: 4vw;
        padding-bottom: 8vw;
        flex-direction: row;
        flex-wrap: wrap;
      
        .emoji-icon {
          @include center;
          width: 7vw;
          height: 7vw;
          font-size: 5vw;
        
          &:nth-child(7n) {
            margin-right: 0px;
          }
        
          margin-right: 20px;
          text-align: center;
        }
      }
    }
  }
</style>
